<template>
  <a-modal title="设置落地页" v-model:visible="visible" width="1000px" @ok="save">
    <AccountTemplate @update:active="accountChange">
      <template #default>
        <a-radio-group v-model:value="ladingPageMap[accountId].type" style="margin-bottom: 10px" @change="handleTypeChange">
          <a-radio-button value="video">视频落地页素材</a-radio-button>
          <a-radio-button value="customized">应用详情页</a-radio-button>
          <a-radio-button value="customized2">个性化详情页</a-radio-button>
        </a-radio-group>
        <div v-if="ladingPageMap[accountId].type === 'video'">
          <div v-if="ladingPageMap[accountId].video && !_.isEmpty(ladingPageMap[accountId].video)">
            <div>
              <video
                :src="'http://t1.market.xiaomi.com/download/' + ladingPageMap[accountId].video.url"
                class="video-item"
                controls
              ></video>
            </div>
            <div class="video-info">
              <div>{{ ladingPageMap[accountId].video.name }}</div>
              <div>
                {{ formattedSize(ladingPageMap[accountId].video.size) }}，{{ ladingPageMap[accountId].video.duration / 1000 }} s，{{
                  ladingPageMap[accountId].video.width
                }}x{{ ladingPageMap[accountId].video.height }}
              </div>
            </div>
          </div>
          <a-button type="primary" @click="selectVideo">选择视频落地页素材</a-button>
        </div>
        <div v-if="ladingPageMap[accountId].type === 'customized2'">
          <!-- 可清空 -->
          <a-input style="width: 600px" v-model:value="ladingPageMap[accountId].value" placeholder="请输入落地页url地址" allowClear />
        </div>
      </template>
    </AccountTemplate>
  </a-modal>
  <SelectVideo ref="selectVideoRef" :accountId="accountId" :key="accountId" @update:selectedVideo="handleSelectVideo" />
</template>

<script setup lang="ts">
import { ref, provide, computed, inject } from "vue";
import AccountTemplate from "@/pages/NewBatchCreateAd/components/common/MultiAccountTemplate.vue";
import { batchCreateAdStore } from "@/pages/NewBatchCreateAd/store/batchCreateAdStore";
import SelectVideo from "./SelectVideo.vue";
import { formattedSize } from "@/pages/NewBatchCreateAd/tool";
import { message } from "ant-design-vue";
import _ from "lodash";
const store = batchCreateAdStore();
const { AccountItems } = store;
provide("accounts", AccountItems);

const visible = ref(false);

const emit = defineEmits(["update:save"]);

const accountIdIndex = ref(0);
// 计算账号id
const accountId = computed(() => {
  return AccountItems && AccountItems.length > 0 ? AccountItems[accountIdIndex.value]?._id : undefined;
});
const accountChange = (index: number) => {
  accountIdIndex.value = index;
};

const selectVideo = () => {
  selectVideoRef.value.show();
};

const save = () => {
  for (const key in ladingPageMap.value) {
    if (ladingPageMap.value[key].type === "video") {
      if (_.isEmpty(ladingPageMap.value[key].video)) {
        message.error("请选择视频落地页素材");
        return;
      }
    }
    if (ladingPageMap.value[key].type === "customized2") {
      if (_.isEmpty(ladingPageMap.value[key].value)) {
        message.error("请输入落地页url地址");
        return;
      }
    }
  }
  emit("update:save", ladingPageMap.value);
};

// 选择视频
const selectVideoRef = ref();
const handleSelectVideo = (video: any) => {
  ladingPageMap.value[accountId.value].video = video;
  selectVideoRef.value.reset();
  selectVideoRef.value.hide();
};

const ladingPage: any = inject("ladingPageMap");
const obj = ladingPage.value || {};
const ladingPageMap = ref(_.cloneDeep(obj));

// 判断obj的key是否在AccountItems中，不在则删除
Object.keys(obj).forEach((key: any) => {
  const numKey = parseInt(key);
  if (!AccountItems.some((account: any) => account._id === numKey)) {
    delete ladingPageMap.value[key];
  }
});

// 确保所有账号落地页设置都有默认值
AccountItems.forEach((account: any) => {
  if (!ladingPageMap.value[account._id]) {
    ladingPageMap.value[account._id] = {
      type: "customized",
      value: "",
      video: {},
    };
  }
});

// 类型切换
const handleTypeChange = () => {
  ladingPageMap.value[accountId.value].value = "";
  ladingPageMap.value[accountId.value].video = {};
};

// 导出给父组件使用的方法
const show = () => {
  visible.value = true;
};
const hide = () => {
  visible.value = false;
};
defineExpose({
  show,
  hide,
});
</script>

<style scoped lang="less">
.video-info {
  width: 220px;
  font-size: 12px;
  color: #666;
}
.video-item {
  width: 220px;
  height: 100px;
  border-radius: 5px;
}
</style>
